<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { getDepositoryPage } from "@/api/common";

const submitForm = ref({
  depositoryId: "",
  depositoryName: "",
  des: ""
});
const warehouseList = ref([]);
const formRef = ref();
const formRules = reactive({
  depositoryId: [{ required: true, message: "清选择", trigger: "change" }]
});

onMounted(async () => {
  // 获取仓库列表
  let params = {
    type: 0,
    status: 0,
    pageNum: 1,
    pageSize: 500
  };
  getDepositoryPage(params).then(res => {
    warehouseList.value = res.data?.records || [];
    if (warehouseList.value.length > 0) {
      submitForm.value.depositoryId = warehouseList.value[0].id;
    }
  });
});

function getRef() {
  return formRef.value;
}

function getForm() {
  let obj = warehouseList.value.find(
    v => v.id == submitForm.value.depositoryId
  );
  submitForm.value.depositoryName = obj.depositoryName;
  return submitForm.value;
}

defineExpose({ getRef, getForm });
</script>

<template>
  <div class="choose-depo">
    <el-form
      ref="formRef"
      label-position="right"
      label-width="80"
      :model="submitForm"
      :rules="formRules"
      class="w-[360px]"
    >
      <el-form-item label="到货仓库" prop="depositoryId">
        <el-select
          v-model="submitForm.depositoryId"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in warehouseList"
            :key="item.id"
            :label="item.depositoryName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="name">
        <el-input
          v-model="submitForm.des"
          placeholder="请输入"
          clearable
          type="textarea"
          :rows="4"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.choose-depo {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
</style>
